<template>
  <div style="margin-top:30px">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="单号" style="margin-right:15px"   label-width="120px">
              <el-input v-model="form.sourceCode"  style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="入驻商" style="margin-right:15px"   label-width="120px" >
              <el-input v-model="form.shipmentName"  style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="商品编码" style="margin-right:15px"   label-width="120px">
              <el-input v-model="form.goodCode"  style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="商品名称" style="margin-right:15px"   label-width="120px" >
              <el-input v-model="form.goodsName"  style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="批次号" style="margin-right:15px"   label-width="120px">
              <el-input v-model="form.receiveLot"  style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="费用类型" style="margin-right:15px"   label-width="120px" >
              <el-input v-model="form.feeType"  style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="开始时间" style="margin-right:15px"   label-width="120px">
              <el-input v-model="form.gmtSettledBegin"  style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="结束时间" style="margin-right:15px"   label-width="120px" >
              <el-input v-model="form.gmtSettledEnd"  style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="数量" style="margin-right:15px"   label-width="120px">
              <el-input v-model="form.quantity"  style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="重量（吨）" style="margin-right:15px"   label-width="120px" >
              <el-input v-model="form.weight"  style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="结算单位" style="margin-right:15px"   label-width="120px">
              <el-input v-model="form.billingUnit"  style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="单价" style="margin-right:15px"   label-width="120px" >
              <el-input v-model="form.unitPrice"  style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>



      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="金额" style="margin-right:15px"   label-width="120px"  prop="amountMoney">
              <el-input v-model="form.amountMoney" placeholder="请输入金额" style="width:100%"  maxlength="21"  show-word-limit/>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="备注" style="margin-right:15px"   label-width="120px">
              <el-input v-model="form.remarks" placeholder="请输入备注" style="width:100%"  maxlength="100"  show-word-limit/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmit"  :disabled="isDisable" plain>确 定</el-button>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import request from '@/utils/request'
  import {expenseDetailDetail,expenseDetailEdit} from '@/api/settlement'
  import { SelectArea } from "@/api/orderform";

  Vue.use(VXETable)
  export default {
    data() {
      return {
        isDisable:false,   //确定键显示按钮

        areaOptions: [],
        form: {
          areaList: [],
          amountMoney: '',        
          shipmentName: '',           
          sourceCode: '',           
          goodCode: '',       
          goodsName: '',        
          receiveLot: '',         
          feeType: '',         
          gmtSettledBegin: '',           
          gmtSettledEnd: '',     
          quantity: '', 
          weight: '',       
          billingUnit: '',      
          unitPrice: '',           
          phoneNumber: '',    
          locationManagement:'',

          province: '',       //省
          remarks: '',        //备注
          serialNumber: '',   //仓库代码
          status: '',         //状态
          type: '',           //仓库类型
        },
        rules: {
          amountMoney: [
            {required: true, message: '请输入金额', trigger: 'blur'},
            { pattern: /^\d{0,14}(\.\d{0,6})?$/, message: '金额需大于0，小数点前限制14位小数点后限制6位' },
          ],
        },
      }
    },
    created() {
      // this.findWarehouseList()
      // this.findwarehouseSpaceListNew()
      SelectArea().then(response => {
        this.areaOptions = response.data.records;
      });
    },
    methods: {
      // 获取页面信息
      getInfo(code) {
        expenseDetailDetail(code).then(response => {
          this.form = response.data
 
          // this.$message({message: response.msg, type: 'success'})
        })
      },
      // 提交
      funcSubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.isDisable = true
            expenseDetailEdit(this.form.code,this.form.amountMoney,this.form.remarks).then(response => {
              this.$message({ message: response.msg, type: 'success' })
              this.$emit('fatherEditMethod')
              this.isDisable = false
            }).catch(() => this.isDisable = false)
          } else {
              return false
          }
        })

      },

      // 取消
      funcCancel() {
        this.$emit('fatherCancelMethod', 'edit')
      }

    }
  }
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 90px;
    float: right;
  }
</style>
